<template>
  <div class="container-big wing-blank forward-give-page">
    <div style="padding-bottom: 136px;" class="container">
      <banner />
      <div class="enter-box">
        <div class="order-tit">
          购票人信息
        </div>
        <div class="from-box">
          <div class="from-tit ">
            <img class="from-tit-img" src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
            温馨提示：通过该团购模式购买的门票将派发至您登录时填写的手机号码。
          </div>
          <co-list style=" border: 1px solid rgba(61, 61, 61, 0.8); " form>
            <co-list-item>
              <span class="forward-give-form-label">
                姓名
              </span>
              <co-input maxLength="46" v-model.trim="$store.state.buyTicket.cUserName" slot="right" placeholder="请输入" />
            </co-list-item>
            <co-list-item>
              <span class="forward-give-form-label">
                手机号码
              </span>
              <co-input slot="right" v-model.trim="phone" :readonly="true" placeholder="未获取到用户信息，请重新去登录" />
            </co-list-item>
            <co-list-item>
              <span class="forward-give-form-label">
                公司名称
              </span>
              <co-input maxLength="66" v-model.trim="$store.state.buyTicket.cname" slot="right" placeholder="请输入" />
            </co-list-item>
          </co-list>
          <div v-if="$store.state.buyTicket.carTicketList.length!=0" class="buyTicket-box">
            <buyTicket v-for="(item, ind) of $store.state.buyTicket.carTicketList" :key="ind" :ticket="item.body_ticket[0]" />
          </div>
          <!-- 单独：类似申请发票-->
          <!-- <div style="min-height: 20px;" class="from">
            <div class="from-item ">
              <div class="from-input-box">
                <div class="from-input-tit cenLeft ">
                  申请发票
                </div>
                <div class="from-input-invoice ">
                  <p class="cenRig">{{invoiceOne}}</p>
                  <p class="cenRig">{{invoiceTwo}}</p>
                </div>
                <input v-model="invoice" style="color:#AFAFB0; text-align:right;" type="text" class="from-input ">
                <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
                  <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
                </div>
              </div>
            </div>
          </div> -->
          <!-- 服务协议 -->
          <div v-if="agreement.length!=0" class="agree-box">
            <span @click="ifAgree=!ifAgree" class="agree-check cenCen">
              <img v-if="!ifAgree" src="https://img.alicdn.com/tfs/TB1gLM9Q7voK1RjSZFwXXciCFXa-200-200.png" />
              <img v-else src="https://img.alicdn.com/tfs/TB1fLM9Q7voK1RjSZFwXXciCFXa-200-200.png" />
            </span>
            <span @click="ifAgree=!ifAgree" style="color: #fff;" class="readAndAgree">我已仔细阅读并同意</span>
            <span>
              <br>
              <br />
              <a target="_blank" class="readAndAgree" style="   font-weight: bold;text-decoration: underline;" @click="openPage(item.agreementId)" ref="javascript:void(0);" v-for="(item,index) of agreement" :key="index" :style="[{color:$store.state.themeColor}]">《{{item.title}}》</a>
            </span>
            <!-- <a v-if="aHref" target="_blank" :href="aHref">《购票服务协议》</a>
            <span v-else @click="getgetAgeree()">《购票服务协议》</span> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 底部购物车付款 -->
    <div class="screen-fixed-box cenCen">
      <div style="background: #313339;position: relative;" class="goods-box cenBet">
        <div class="goods cenCen">
          <div class="goods-con-box">
            <div class="goods-con-tit">
              <span class="actualPrice-enter">
                <span style="font-size: 12px;">¥</span>
                <span>{{ $store.state.buyTicket.actualPrice }}</span>
                <span style="font-size: 12px;">元</span>
              </span>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " style=" text-decoration: none;text-decoration: none;font-size: 12px;" href="javascript:void(0);" class="originalPrice">
                已优惠
              </a>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " href="javascript:void(0);" style="text-decoration: none;" class="originalPrice-enter-a">
                <span style="font-size: 12px;">¥</span>
                <span>{{ Number($store.state.buyTicket.totalPrice-$store.state.buyTicket.actualPrice).toFixed(2) }}</span>
                <span style="font-size: 12px;">元</span>
              </a>
            </div>
            <div class="goods-con-con">
              已经选购{{ $store.state.buyTicket.carTicketSumList.length }}张
            </div>
          </div>
        </div>
        <div @click="checkPay()" :class="{'submitBtnCheck':ifAgree&&$store.state.buyTicket.carTicketSumList.length > 0&&ifClick}" class="submit-btn cenCen">
          <div>
            同意并付款
          </div>
        </div>
        <div v-if=" $store.state.buyTicket.getTicketState.resignationChangeNoticeContent" @click="ticketChangesAlert=true" style=" cursor: pointer;" :style="[{color:$store.state.themeColor}]" class="ticketChanges-box ">
          退改签须知
          <!-- <img src="https://img.alicdn.com/tfs/TB17vOKX.KF3KVjSZFEXXXExFXa-200-200.png"> -->
        </div>
      </div>
    </div>
    <van-popup position="bottom" class="van-popup-ticketChanges" v-model="ticketChangesAlert">
      <div class="ticketChanges-chan-box maxWidth">
        <!-- <div class="van-popup-ticketChanges-close">
          <img @click="ticketChangesAlert=false" src="https://img.alicdn.com/tfs/TB1BRO6XYys3KVjSZFnXXXFzpXa-200-200.png" />
        </div> -->
        <ticketChanges />
      </div>
    </van-popup>
  </div>
</template>
<script>
import banner from "./../orderEnter/banner/banner";
import buyTicket from "./assembly/buyTicket/buyTicket";
import ticketChanges from "./ticketChanges/index"; //退改签须知
import { storageCar } from "./../../router/publicJs/storageCar.js";
import { getUrlParameter } from "@/router/publicJs/getUrlParameter.js"; // 得到url 参数并且赋值
import buyTicketService from "@/api/buyTicketService.js";
import { jwtFun } from "@/router/publicJs/jwt";
import { getOrderDetail } from "@/api/getOrderDetail";
import profileSc from "@/api/profile";
export default {
  components: {
    banner,
    buyTicket,
    ticketChanges
  },
  data() {
    return {
      phone: "", //负责人手机号
      agreement: [], //协议
      ticketChangesAlert: false,
      ifAgree: false,
      ifClick: true, //是否可以点击，防止重复点击
      invoice: "大会结束后在“个⼈中⼼-订单详情”进行申请",
      invoiceOne: "大会结束后在“个⼈",
      invoiceTwo: "中⼼-订单详情”进行申请",
      getOrderStateNum: 0 //获取订单状态次数
    };
  },
  created() {
    if (sessionStorage.getItem("ifAgree") === "true") {
      this.ifAgree = true;
    }

    if (sessionStorage.getItem("cUserName")) {
      this.$store.state.buyTicket.cUserName = sessionStorage.getItem(
        "cUserName"
      );
    }

    this.initFun();
  },
  methods: {
    async initFun() {
      storageCar();
      let res = await getUrlParameter();

      let agereeMents = [];
      if (sessionStorage.getItem("agereeMents")) {
        agereeMents = JSON.parse(sessionStorage.getItem("agereeMents"));
      }
      for (let i = 0; i < agereeMents.length; i++) {
        if (agereeMents[i].typeId == 1) {
          this.agreement.push(agereeMents[i]);
        }
      }
      if (this.agreement.length == 0) {
        this.$toast("请管理员创建购票协议");
        this.$router.push({
          name: "buyTicketHome"
        });
      }
      const jwtData = await jwtFun();
      this.phone = jwtData.linkphone;
      this.$store.state.buyTicket.cname = jwtData.company || "";
      profileSc.queryUserCompanyInfo().then(res => {
        this.$store.state.buyTicket.cname = res.result.company || "";
      });
    },
    // 获取新的协议页面
    openPage(agreementId) {
      sessionStorage.setItem(
        "cUserName",
        this.$store.state.buyTicket.cUserName
      );
      sessionStorage.setItem("ifAgree", this.ifAgree);
      buyTicketService.lookAgreement(agreementId).then(res => {
        if (res.success) {
          window.location.href = res.result;
        }
      });
    },
    checkPay() {
      this.$store.state.buyTicket.orderType = 1; //订单类型 0是个人 1是团购
      if (this.$store.state.buyTicket.carTicketSumList.length == 0) {
        this.$toast("您需要选择购票");
        return;
      }
      if (!this.$store.state.buyTicket.cUserName) {
        this.$toast("请输入姓名");
        return;
      }
      if (!this.$store.state.buyTicket.cname) {
        this.$toast("请输入公司名称");
        return;
      }

      if (!this.ifAgree && this.agreement.length) {
        let text = "请您务必仔细阅读";
        for (let i = 0; i < this.agreement.length; i++) {
          text += `《${this.agreement[i].title}》`;
        }
        this.$toast(text);
        return;
      }
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 1000);
      storageCar(); //需要本地存储一下数据，因为这里有加减购物车相当于重新改变了
      //  // 同意并付款生成订单
      this.$store.state.loading = true;
      this.$store.state.loadingText = "订单生成中";
      buyTicketService
        .checkPay(this.$store.state.buyTicket.carTicketList)
        .then(res => {
          if (!res.success) {
            this.$store.state.loading = false;
            return;
          }
          // 服务端延时
          setTimeout(() => {
            this.getOrderState(res.result.billlcode);
          }, 1000);
        });
    },
    // 获取订单状态
    async getOrderState(billlcode) {
      const { success = false } = await getOrderDetail({
        billlcode: billlcode
      });
      console.log("success", success);
      if (!success) {
        if (this.getOrderStateNum >= 5) {
          this.$store.state.loading = false;
          this.$store.state.loadingText = "";
          this.$toast("请在个人中心订单列表查看订单状态");
          this.$router.push({
            path: "/profile/order-list"
          });
          return;
        }
        if (this.getOrderStateNum >= 2) {
          this.$store.state.loadingText = "订单排队中";
        }
        // 如果失败了则继续获取状态
        this.getOrderStateNum++;
        setTimeout(() => {
          this.getOrderState(billlcode);
        }, 2000);
      } else {
        // 如果成功则进行页面跳转
        this.$store.state.loading = false;
        this.$store.state.loadingText = "";
        this.$router.push({
          path: "/orderDetail",
          query: {
            billlcode: billlcode
          }
        });
      }
    }
  }
};
</script>

<style  scoped lang="less">
.forward-give-page {
  text-align: left;
  .forward-give-form-label {
    width: 112px;
  }
}
.enter-box {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.order-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 44px;
  color: #ffffff;
  padding: 0px;
  margin: 0px;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #b9b9bb;
  position: relative;
  text-indent: 36px;
  margin-top: 16px;
  margin-bottom: 26px;
}
.from-tit-img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.agree-box {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  margin-top: 26px;
  color: #fff;
}
.agree-check {
  width: 26px;
  height: auto;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
.agree-check > img {
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.agree-box > a,
.agree-box > span {
  cursor: pointer;
}
.agree-box > a {
  text-decoration: underline;
}
/* 买票部分 */
.buyTicket-box {
  width: 100%;
  height: auto;
  padding: 0px;
  margin-top: 16px;
  border: 1px solid rgba(61, 61, 61, 0.8);
  border-bottom: 0px;
}

/* 底部购物车等 */
.goods-box {
  z-index: 9;
  width: 100%;
  height: auto;
  padding: 0px;
  min-height: 110px;
  background: #35383f;
  box-shadow: 0 -10px 17px 0 rgba(0, 0, 0, 0.1);
}
/* 提交按钮 */
.submit-btn {
  width: auto;
  height: auto;
  min-height: 110px;
  background: #2b2d31;
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  min-width: 260px;
  cursor: pointer;
  position: relative;
}

.submitBtnCheck {
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.submit-btn > div {
  height: 100%;
  color: #eeeeee;
}

.submit-btn:active {
  // opacity: 0.6;
}
/* 左边的功能容器 */
.goods {
  width: auto;
  height: 100%;
  position: relative;
  padding-left: 20px;
}
/* 购物车内容部分 */
.goods-con-box {
  width: auto;
  height: auto;
  text-align: left;
  margin: 0px 0px 0px 10px;
}

.goods-con-tit {
  width: auto;
  height: auto;
  font-size: 26px;
  color: #ebecec;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
}

.goods-con-con {
  width: auto;
  height: auto;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  padding: 3px 3px 3px 0px;
  font-size: 20px;
  color: #ebecec;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  flex-wrap: nowrap;
  cursor: pointer;
}
.goods-con-con > img {
  width: 26px;
  height: auto;
  margin-left: 6px;
}

.ticketChanges-box {
  position: absolute;
  right: 250px;
  bottom: 0px;
  width: 180px;
  height: auto;
  /* opacity: 0.8; */
  font-size: 28px;
  font-weight: bold;
  text-decoration: underline;
  color: #ebecec;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  flex-wrap: nowrap;
  cursor: pointer;
  padding-bottom: 18px;
}
.ticketChanges-box > img {
  width: 35px;
  height: auto;
  margin-left: 6px;
}
.actualPrice-enter {
  margin-right: 5px;
}
.actualPrice-enter > span {
  font-size: 30px;
  color: #ebecec;
}
.originalPrice {
  text-decoration: line-through;
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #ebecec;
  letter-spacing: 2.8px;
}
.originalPrice-enter-a > span {
  text-decoration: line-through;
  opacity: 0.4;
  font-size: 30px;
  color: #ebecec;
}
.van-popup-ticketChanges {
  max-height: 66% !important;
}
.van-popup-ticketChanges-close {
  width: 100%;
  height: auto;
  text-align: right;
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
}
.van-popup-ticketChanges-close > img {
  width: 40px;
  height: auto;
  margin: 26px 26px 0px 0px;
}
.from-item {
  padding: 0px 18px;
  width: 100%;
  height: auto;
}
.from-item > div:last-of-type {
  border-bottom: none;
}
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 166px;
  height: auto;
  min-height: 100px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 6px 0px 0px;
}
.from-input-invoice {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  text-align: right;
  padding-top: 16px;
}
.from-input-invoice > p {
  width: 100%;
  text-align: right;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
}
.from {
  width: 100%;
  height: auto;
  /* min-height: 160px; */
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(93, 93, 93, 0.2); */
  /* border: 1px solid #38383b; */
  margin-top: 26px;
  border-radius: 8px 8px 6px 6px;
}
.ticketChanges-chan-box {
  width: 100%;
  height: auto;
  position: relative;
}
.readAndAgree {
  font-size: 30px;
}
</style>